{extend name="common:base"/}
{block name="body"}
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-12">
        <h2>用户相册</h2>
    </div>
</div>
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>相册 </h5>
                    <div class="ibox-tools">
                        <a data-toggle="modal" data-target="#Model" title="上传图片" class=""><i class="fa  fa-cloud-upload"></i></a>
                        <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        <a class="close-link"><i class="fa fa-times"></i></a>
                    </div> 
                </div>
                <div id="uploader" class="wu-example">
                    <div class="queueList">
                        <div id="dndArea" class="placeholder">
                            <div id="filePicker"></div>
                            <p>或将照片拖到这里，单次最多可选300张</p>
                        </div>
                    </div>
                    <div class="statusBar" style="display:none;">
                        <div class="progress">
                            <span class="text">0%</span>
                            <span class="percentage"></span>
                        </div>
                        <div class="info"></div>
                        <div class="btns">
                            <div id="filePicker2"></div>
                            <div class="uploadBtn">开始上传</div>
                        </div>
                    </div>
                </div>
                <div class="ibox-content">
                    {notempty name='list'}
                    {volist name='list' id='vo'}
                    <a class="fancybox" data-fancybox-group="button" href="{$vo.path}">
                        <img alt="image" data-original="{$vo.path}" />
                    </a>
                    {/volist}
                    {else /}
                    <div class="text-center">没有暂时没有图片</div>
                    {/notempty}
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="css"}
<link href="__JS__/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="__CSS__/plugins/webuploader/webuploader.css">
<link rel="stylesheet" type="text/css" href="__CSS__/demo/webuploader-demo.css">
{/block}
{block name="script"}

<script src="__JS__/plugins/fancybox/jquery.fancybox.js"></script><!-- Fancy box -->
<script src="//cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
<script type="text/javascript">
    var BASE_URL = '__JS__/plugins/webuploader';// 添加全局站点信息
    var upload_server = "{:\\think\\Url::build('uploader')}";
</script>
<script src="__JS__/plugins/webuploader/webuploader.min.js"></script><!-- Web Uploader -->
<script src="__JS__/demo/webuploader-demo.js"></script>
<script type="text/javascript">
    $(function () {
        $('.fancybox').fancybox({
            transitionIn: 'elastic',
            transitionOut: 'elastic',
            speedIn: 600,
            speedOut: 200,
            overlayShow: true,
            autoScale: true,
            padding: 5,
            openEffect: 'elastic',
            openSpeed: 150,
            closeEffect: 'elastic',
            closeSpeed: 150,
            prevEffect: 'elastic',
            nextEffect: 'elastic',
            closeBtn: true,
            cyclic: true
        });
        $(".fancybox img").lazyload({
//            placeholder : "__IMG__/loading.gif", //用图片提前占位
            threshold: 100, // 提前开始加载
            failurelimit: 10,
            effect: "fadeIn"
        });
    }); 
</script>
{/block}